<template>
  <div>
      <div v-show="!showSecond">
        <el-select v-model="value1" placeholder="请选择网络图类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="month"
          type="month"
          placeholder="选择月">
        </el-date-picker>
        <el-button type="primary" @click="show">确定</el-button>
      </div>
      <div v-show="showSecond">
        
        姓名：<div class="item_input"><el-input type="text"></el-input></div>
        编号：<div class="item_input"><el-input type="text"></el-input></div>
        <el-select v-model="value2" placeholder="全部">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        由<el-input type="text" style="width:80px"></el-input>
        至<el-input type="text" style="width:80px"></el-input>
        <el-button type="primary" @click="show1" style="margin-left:20px">确定</el-button>
        <el-button type="primary" v-show="showBtn">打印</el-button>
        <el-button type="primary" v-show="showBtn">下载</el-button>
        <el-button @click="noShow">返回</el-button>
      </div>
      <div class="page_word" v-show="showTable == ''">BNS-3-2-2</div>
      <div v-show="isShowTable" style="margin-top:20px">
        <div style="text-align:center">{{value1}}</div>
        <el-table
          v-show="showTable == '五星图'"
          :data="tableData1"
          border
          style="width: 100%">
          <el-table-column
            prop="a"
            label="行数">
          </el-table-column>
          <el-table-column
            prop="b"
            label="代数">
          </el-table-column>
          <el-table-column
            prop="b2"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="c"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="d"
            label="PPV">
          </el-table-column>
          <el-table-column
            prop="e"
            label="GPV">
          </el-table-column>
          <el-table-column
            prop="f"
            label="OPV">
          </el-table-column>
          <el-table-column
            prop="g"
            label="合格部门">
          </el-table-column>
          <el-table-column
            prop="h"
            label="当月级别">
          </el-table-column>
          <el-table-column
            prop="i"
            label="最高级别">
          </el-table-column>
        </el-table>
        <div class="page_word" v-show="showTable == '五星图'">BNS-3-2-2.1</div>
        <el-table
          v-show="showTable == '合格五星图'"
          :data="tableData2"
          border
          style="width: 100%">
          <el-table-column
            prop="a"
            label="行数">
          </el-table-column>
          <el-table-column
            prop="b"
            label="代数">
          </el-table-column>
          <el-table-column
            prop="b2"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="c"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="d"
            label="PPV">
          </el-table-column>
          <el-table-column
            prop="e"
            label="GPV">
          </el-table-column>
          <el-table-column
            prop="f"
            label="OPV">
          </el-table-column>
          <el-table-column
            prop="f1"
            label="紧缩积分">
          </el-table-column>
          <el-table-column
            prop="f2"
            label="借分">
          </el-table-column>
          <el-table-column
            prop="f3"
            label="被借分">
          </el-table-column>
          <el-table-column
            prop="f4"
            label="实际计算积分">
          </el-table-column>
          <el-table-column
            prop="g"
            label="合格部门">
          </el-table-column>
          <el-table-column
            prop="h"
            label="当月级别">
          </el-table-column>
          <el-table-column
            prop="i"
            label="最高级别">
          </el-table-column>
        </el-table>
        <div class="page_word" v-show="showTable == '合格五星图'">BNS-3-2-2.2</div>
        <el-table
          v-show="showTable == '金钻图'"
          :data="tableData3"
          border
          style="width: 100%">
          <el-table-column
            prop="a"
            label="行数">
          </el-table-column>
          <el-table-column
            prop="b"
            label="代数">
          </el-table-column>
          <el-table-column
            prop="b2"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="c"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="d"
            label="PPV">
          </el-table-column>
          <el-table-column
            prop="e"
            label="GPV">
          </el-table-column>
          <el-table-column
            prop="f"
            label="OPV">
          </el-table-column>
          <el-table-column
            prop="f1"
            label="金钻部门数">
          </el-table-column>
          <el-table-column
            prop="g"
            label="合格部门">
          </el-table-column>
          <el-table-column
            prop="h"
            label="当月级别">
          </el-table-column>
          <el-table-column
            prop="i"
            label="最高级别">
          </el-table-column>
        </el-table>
        <div class="page_word" v-show="showTable == '金钻图'">BNS-3-2-2.3</div>
        <el-table
          v-show="showTable == '双金钻图'"
          :data="tableData4"
          border
          style="width: 100%">
          <el-table-column
            prop="a"
            label="行数">
          </el-table-column>
          <el-table-column
            prop="b"
            label="代数">
          </el-table-column>
          <el-table-column
            prop="b2"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="c"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="d"
            label="PPV">
          </el-table-column>
          <el-table-column
            prop="e"
            label="GPV">
          </el-table-column>
          <el-table-column
            prop="f"
            label="OPV">
          </el-table-column>
          <el-table-column
            prop="f1"
            label="金钻部门数">
          </el-table-column>
          <el-table-column
            prop="f2"
            label="合并后类型">
          </el-table-column>
          <el-table-column
            prop="h"
            label="当月级别">
          </el-table-column>
          <el-table-column
            prop="i"
            label="最高级别">
          </el-table-column>
        </el-table>
        <div class="page_word" v-show="showTable == '双金钻图'">BNS-3-2-2.4</div>
      </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      showSecond:false,
      showBtn:false,
      value1:"",
      value2:"",
      month:"",
      isShowTable:false,
      showTable:"",
      options: [
        {
          value: '五星图',
          label: '五星图'
        },
        {
          value: '合格五星图',
          label: '合格五星图'
        },
        {
          value: '金钻图',
          label: '金钻图'
        },
        {
          value: '双金钻图',
          label: '双金钻图'
        },
      ],
      options2: [
        {
          value: '页',
          label: '页'
        },
        {
          value: '行',
          label: '行'
        },
      ],
      tableData1:[
        {
          a:"00001",
          b:"01",
          b2:"陈大文",
          c:"123456",
          d:"9000",
          e:"2560",
          f:"2200",
          g:"4",
          h:"7",
          i:"9"
        },
        {
          a:"00002",
          b:"02",
          b2:"李红",
          c:"234567",
          d:"20000",
          e:"18000",
          f:"20000",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00003",
          b:"02",
          b2:"李三",
          c:"345678",
          d:"20000",
          e:"18000",
          f:"20000",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00004",
          b:"02",
          b2:"张三",
          c:"456789",
          d:"20000",
          e:"18000",
          f:"20000",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00005",
          b:"02",
          b2:"张红",
          c:"567890",
          d:"20000",
          e:"18000",
          f:"20000",
          g:"0",
          h:"7",
          i:"9"
        },
      ],
      tableData2:[
        {
          a:"00001",
          b:"01",
          b2:"陈大文",
          c:"123456",
          d:"9000",
          e:"2560",
          f:"2200",
          f1:"100",
          f2:"50",
          f3:"50",
          f4:"70",
          g:"4",
          h:"7",
          i:"9"
        },
        {
          a:"00002",
          b:"02",
          b2:"李红",
          c:"234567",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"100",
          f2:"50",
          f3:"50",
          f4:"70",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00003",
          b:"02",
          b2:"李三",
          c:"345678",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"100",
          f2:"50",
          f3:"50",
          f4:"70",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00004",
          b:"02",
          b2:"张三",
          c:"456789",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"100",
          f2:"50",
          f3:"50",
          f4:"70",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00005",
          b:"02",
          b2:"张红",
          c:"567890",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"100",
          f2:"50",
          f3:"50",
          f4:"70",
          g:"0",
          h:"7",
          i:"9"
        },
      ],
      tableData3:[
        {
          a:"00001",
          b:"01",
          b2:"陈大文",
          c:"123456",
          d:"9000",
          e:"2560",
          f:"2200",
          f1:"5",
          g:"4",
          h:"7",
          i:"9"
        },
        {
          a:"00002",
          b:"02",
          b2:"李红",
          c:"234567",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"5",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00003",
          b:"02",
          b2:"李三",
          c:"345678",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"5",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00004",
          b:"02",
          b2:"张三",
          c:"456789",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"5",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00005",
          b:"02",
          b2:"张红",
          c:"567890",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"5",
          g:"0",
          h:"7",
          i:"9"
        },
      ],
      tableData4:[
        {
          a:"00001",
          b:"01",
          b2:"陈大文",
          c:"123456",
          d:"9000",
          e:"2560",
          f:"2200",
          f1:"4",
          f2:"4-100",
          g:"4",
          h:"7",
          i:"9"
        },
        {
          a:"00002",
          b:"02",
          b2:"李红",
          c:"234567",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"4",
          f2:"4-100",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00003",
          b:"02",
          b2:"李三",
          c:"345678",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"4",
          f2:"4-100",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00004",
          b:"02",
          b2:"张三",
          c:"456789",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"4",
          f2:"4-100",
          g:"0",
          h:"7",
          i:"9"
        },
        {
          a:"00005",
          b:"02",
          b2:"张红",
          c:"567890",
          d:"20000",
          e:"18000",
          f:"20000",
          f1:"4",
          f2:"4-100",
          g:"0",
          h:"7",
          i:"9"
        },
      ],
    }
  },
  methods:{
      show(){
        this.showSecond = true
        this.showBtn = true
        this.isShowTable = true
        this.showTable = this.value1
      },
      show1(){
        this.showBtn = true
        this.isShowTable = true
        this.showTable = this.value1
      },
      noShow(){
        this.showTable = ""
        this.showSecond = false
        this.isShowTable = false
      }
  },
}
</script>
<style>
.networkTableTitle{
  text-align: center;
  font-size: 20px;
  padding: 10px;
}
</style>


